<script setup lang="ts">
import { ref } from 'vue';
import Son from './componets/son.vue';

const isShow = ref(false)
const num = ref(20)
</script>

<template>
 <transition name="bounce">
  <div class="box" v-if="isShow"></div>
</transition>
<button @click="isShow = !isShow"></button>
<son v-model:num="num"/>
</template>

<style  lang="less" scoped>
 
 @keyframes bounce {
  0% {
    transform:scale(0)
  } 
  25% {
   transform:scale(1.5)
  } 
  50% {
   transform:scale(0.7)
  }
  75% {  
   transform:scale(1.2)
  }
  100% {
   transform:scale(1)
  }
}
.bounce-enter-active {
  animation: 4s bounce ;
}

.bounce-leave-active {
  // 动画反转
  animation: 4s bounce reverse;
}
.box{
  width: 200px;
  height: 200px;
  background-color: pink;

}
.v-enter-from {
  opacity: 0;
  width: 100px;
  height: 100px;
}

.v-enter-active {
  transition: all 3s;
}

.v-enter-to {
  opacity: 1;
  width: 200px;
  height: 200px;
}

.v-leave-from {
  opacity: 1;
}
.v-leave-active {
  transition: all 3s;
}
.v-leave-to {
  opacity: 0;
}

</style>
